@use 'src/scss/gio-layout' as gio-layout;
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

:host {
  @include gio-layout.gio-responsive-content-container;
}
.only-configured-button {
  margin-left: 16px;
}

.allApiHCStatus {
  height: 80px;
  width: 180px;
  display: block;
}

.mat-column-picture {
  width: 0%;
}
.mat-column-states {
  width: 124px;

  .states {
    &__api-started {
      color: mat.get-color-from-palette(gio.$mat-success-palette, 'default');
    }

    &__api-not-started {
      color: mat.get-color-from-palette(gio.$mat-error-palette, 'default');
    }

    &__api-workflow-badge {
      vertical-align: top;
    }

    &__api-origin {
      color: #326de6;
    }

    &__api-is-not-synced {
      color: mat.get-color-from-palette(gio.$mat-warning-palette, 'default');
    }
  }
}
.mat-column-availability {
  width: 372px;
  padding-top: 8px;
  padding-bottom: 8px;

  .chart {
    display: flex;
    &__gauge {
      width: 56px;
      height: 56px;
      margin-right: 16px;
    }
  }
}
.mat-column-actions {
  width: 0%;
}

.apiHCReportBanner {
  margin: 8px 0;
}
